<template>
  <div class="login_container">
    <el-row justify="center">
      <el-col :span="10" :xs="0"></el-col>
      <el-col :span="9" :xs="20">
        <!-- 表单校验1.为el-form添加 model和rules属性(指定存放收集数据的属性和校验规则) -->
        <el-form
          class="login_form"
          :model="loginFrom"
          :rules="rules"
          ref="loginForms"
        >
          <!-- 表单校验4.为el-form添加 ref属性(获取组件暴露的validate方法对收集的数据进行验证) -->
          <h1>Hello</h1>
          <h2>欢迎来到硅谷甄选</h2>
          <!-- 表单校验2.并将form-Item的prop属性设置为需要验证的特殊键值 -->
          <el-form-item prop="username">
            <el-input
              v-model="loginFrom.username"
              :prefix-icon="User"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              v-model="loginFrom.password"
              :prefix-icon="Lock"
              :show-password="true"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              class="login_btn"
              type="primary"
              size="default"
              @click="login"
              :loading="loading"
            >
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts" name="Login">
// 引入图标
import { User, Lock } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'
// 引入用户相关的小仓库store
import useUserStore from '@/store/modules/user'
import { useRoute, useRouter } from 'vue-router'
// element-plus提供的错误提示框
import { ElMessage, ElNotification } from 'element-plus'
// 引入获取当前时间的函数
import { getTime } from '@/utils/time'
// 获取el-form组件实例对象,访问暴露的属性和方法
let loginForms = ref()
// 获取路由器对象
const router = useRouter()
// 获取当前路由对象
const route = useRoute()
// 定义变量控制按钮加载效果
let loading = ref(false)
// 获取数据和方法
const userStore = useUserStore()
// 收集表单数据
const loginFrom = reactive({
  username: 'admin',
  password: '111111',
})
// 登录按钮回调
async function login() {
  // await必须配合async使用,将函数变为异步函数
  // 点击登录按钮以后要做什么？
  // 1.保证全部的表单项校验通过再发请求 await会等待异步任务执行成功后再向下执行
  await loginForms.value.validate() // validate()方法返回一个Promise对象,校验通过状态为成功,否则为失败
  // 2.让按钮出现加载效果
  loading.value = true
  // 3.通知仓库发登录请求(使用pinia将请写在actions中)
  // 也可以使用.then().catch()代替tryCatch await async
  //userStore.userLogin返回一个Promise对象登录成功状态成功,登录失败状态为失败
  try {
    await userStore.userLogin(loginFrom)
    // 4.请求成功跳转到首页(使用编程式导航进行路由跳转)
    router.replace({
      // 如果有query参数就跳转到query参数指定的路由,否则跳转到首页
      path: (route.query.redirect as string) || '/',
    })
    // 5.使用ElNotification展示登录成功的提示信息
    ElNotification({
      type: 'success',
      title: `Hi,${getTime()}好!`,
      message: '欢迎回来',
    })
    // 6.登录成功加载效果也消失
    loading.value = false
  } catch (error) {
    // 错误弹窗提示
    ElMessage({
      type: 'error',
      message: '账号/密码错误！！',
    })
    loading.value = false
  }
}
// 自定义校验规则函数
const validatorUserName = (_rule: any, value: any, callback: any) => {
  // 函数接收三个参数 rule:校验规则对象 value:表单元素的文本内容
  // callback:校验成功使用callback函数放行,校验失败使用callback函数注入错误信息
  /* if (
    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
      value,
    ) ||
    /^[\w-]{4,16}$/.test(value)
  ) {
    // 验证通过
    callback()
  } else {
    // 验证不通过 传递错误信息
    callback(new Error('请输入正确的邮箱或至少四位用户名'))
  } */
  // 用户名|昵称,用户名长度为7-16位且不能全为数字
  if (value.length >= 7 && value.length <= 16) callback()
  else if (value == 'admin') callback()
  else callback(new Error('用户名长度为7-16位且不能全为数字'))
}
const validatorPassword = (_rule: any, value: any, callback: any) => {
  /* if (/^\S*(?=\S{6,})(?=\S*\d)(?=\S*[a-zA-Z])\S*$/.test(value)) {
    callback()
  } else {
    callback(new Error('密码长度不能小于6位且包含字母和数字'))
  } */
  if (value.length >= 6 && value.length <= 20) callback()
  else callback(new Error('密码长度为6-20位'))
}
// 定义表单校验需要的配置对象(设置验证规则)
/* required:是否为必填,message:错误提示信息,trigger触发校验表单的方式 blur(失去焦点)/change(文本变化)
  min:文本长度至少多少位,max:文本长度至多多少位*/
const rules = {
  username: [
    // {required: true,message: '用户名不能为空哦！',trigger: 'blur',},
    // {required: true,min: 5,max: 10,message: '用户名长度为5-10位',trigger: 'change',},
    // 自定义校验规则
    { trigger: 'change', validator: validatorUserName },
  ],
  password: [
    // { required: true, message: '密码不能为空哦！', trigger: 'blur' },
    // { min: 6, message: '密码长度至少6位', trigger: 'change' },
    { trigger: 'change', validator: validatorPassword },
  ],
}
</script>
<style scoped lang="scss">
.login_container {
  width: 100%;
  height: 100vh; /*视口高度*/
  background-image: url('@/assets/images/background.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  .login_form {
    position: relative;
    width: 100%;
    top: 25vh;
    background: url('@/assets/images/login_form.png') no-repeat;
    background-size: cover;
    border-radius: 5px;
    padding: 30px;
    h1 {
      color: white;
      font-size: 40px;
    }
    h2 {
      color: white;
      font-size: 20px;
      margin: 20px 0;
    }
    .login_btn {
      width: 100%;
    }
  }
}
</style>
